<style scoped>
.title-flex {
    line-height: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title1 {
    cursor: pointer;
    flex: none;
    font-size: 23px;
    font-weight: bold;
}

.title1 img {
    height: 30px;
}
.title5 {
    position: relative;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    padding: 0 10px;
    cursor: pointer;
    transition: color .3s;
    display: flex;
}

.title5 .btn-item {
    width: 80px;
    text-align: center;
    line-height: 40px;
}

.title5 .btn-item:hover {
    color: #56a7ff;
}
</style>
<style>
.nav-container {
    width: 100%;
    color: #000000;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 700;
}
</style>
<template>
    <div class="nav-container">
        <div class="title-flex">
            <div class="flex-none" style="display:flex; align-items: start;margin-top: 5px">
                <div class="title1" @click="$router.push({path: '/'})">
                    <img src="../../../assets/images/home/damai.png"/>
                </div>
                <Divider type="vertical" style="height: 30px;"></Divider>
                <p style="font-size: 18px; color: rgba(0, 0, 0, 0.65);">大迈六宝智慧冷链平台</p>
            </div>
<!--            <div>-->
<!--                <div class="title5">-->
<!--                    <div class="btn-item" @click="$router.push({path: '/login'})">-->
<!--                        首页-->
<!--                        <Divider type="vertical"/>-->
<!--                    </div>-->
<!--                    <div class="btn-item" style="width: 110px" @click="$router.push({path: '/login'})">-->
<!--                        关于我们-->
<!--                        <Divider type="vertical"/>-->
<!--                    </div>-->
<!--                    <div class="btn-item" style="width: 110px" @click="$router.push({path: '/login'})">-->
<!--                        帮助支持-->
<!--                        <Divider type="vertical"/>-->
<!--                    </div>-->
<!--                    <div class="btn-item" style="width: 110px" @click="$router.push({path: '/login'})">-->
<!--                        联系我们-->
<!--                        <Divider type="vertical"/>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
        </div>
    </div>
</template>

<script>
export default {
    name: "index-header",
    props: {
        scrollTop: {
            type: Number,
            default: 100
        }
    },
    data() {
        return {
            show: false,
            showBtn: true,
            currRouteName: '',
            title1: "",
            title2: "青岛港城一体化综合保障服务中心",
            menuList: [],
            defaultMenuList: [
                {
                    title: "首页",
                    name: 'home',
                    url: "/"
                },
                {
                    title: "保障服务",
                    name: 'securityServices'
                },
                {
                    title: "供应大厅",
                    name: 'supplier'
                },
                {
                    title: "周边社情",
                    name: 'news'
                },
                {
                    title: "周边配套",
                    name: 'peripheralSupporting'
                }
            ]
        }
    },
    methods: {
        onSelect(name) {
            this.currRouteName = name;
            if (name === 'securityServices') {
                this.show = true;
                return;
            } else {
                this.show = false;
            }
            switch (name) {
                case 'home':
                    this.$router.push({path: '/'});
                    break;
                case 'project1':
                    this.$router.push({path: '/'});
                    break;
                default:
                    this.$router.push({name: name});
                    break;
            }
        },
        menuMouseEvent(type, name) {
            if (name === 'securityServices') {
                this.show = type === 'over';
            }
        },
        menuArrowClass(item) {
            if (item.children !== undefined) {
                if (item.show) {
                    return ['iconfont', 'icon-arrow-up'];
                } else {
                    return ['iconfont', 'icon-arrow-down'];
                }
            } else {
                return [];
            }
        },
        selectStyle(key) {
            this.title4.forEach(item => {
                if (item.children !== undefined) {
                    if (item.open !== undefined) {
                        if (item.id === key) {
                            item.open = true;
                            item.show = true;
                        } else {
                            item.open = false;
                            item.show = false;
                        }
                    }
                }
            });
        },
        outStyle(key) {
            this.title4[key].open = false;
            let timer;
            let _this = this;
            timer = setTimeout(() => {
                if (!_this.title4[key].open) {
                    _this.title4[key].show = false;
                }
                timer = null;
            }, 1000);
        },
        initRouteName() {
            let to = this.$route;

            this.menuList = this.defaultMenuList;
            this.showBtn = true;

            this.currRouteName = to.name;
            // this.$nextTick(()=>{
            //   this.$refs.menu.updateActiveName();
            // })
        },
        toMobile() {
            window.location.href = './mobile/#/evaluation';
        },
        navClick(name, query) {
            this.$router.push({name, query});
            this.show = false;
        }
    },
    watch: {
        '$route'(to, from) {
            this.initRouteName();
        }
    },
    mounted() {
        this.initRouteName();
    }
}
</script>

<style scoped>
.ivu-divider-horizontal {
    margin: 10px 0 !important;
}

.guarantee-title-container p {
    padding: 7px 0;
    overflow-wrap: break-word;
    color: rgba(34, 34, 34, 1);
    font-size: 14px;
    white-space: nowrap;
    font-weight: 500;
    cursor: pointer;

    font-family: PingFangSC-Medium, serif;
}

.guarantee-title-container p:hover {
    color: rgba(13, 87, 166, 1) !important;
}

.guarantee-title {
    cursor: default !important;
    overflow-wrap: break-word;
    color: rgba(13, 87, 166, 1) !important;
    font-size: 16px !important;
    font-family: PingFangSC-Medium, serif;
    white-space: nowrap;
    font-weight: 900 !important;
}
</style>
